<template>
  <div>
    <div class="my-ad">
      <img
        :src="adList[0].imgUrl"
        alt=""
        @click="toAd(0)"
      >
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in hotList"
        :key="index"
        @click="toVideo(item)"
      >
        <img
          :src="item.img_url"
          alt=""
        >
        <div class="title">{{item.name}}</div>
      </div>
    </div>
    <div class="my-ad">
      <img
        :src="adList[1].imgUrl"
        alt=""
        @click="toAd(1)"
      >
    </div>
    <div
      class="more-wrap"
      v-show="more"
    >
      <span class="more">تېخىمۇ كۆپ</span>
    </div>
  </div>
</template>
<script>
import store from "../../utils/store";

export default {
  onShareAppMessage() {
    return {
      title: "مارس كىنوخانىسى",
      path: "/pages/index/main",
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  data() {
    return {
      pageIndex: 1,
      hotList: {},
      more: true,
      adList: []
    };
  },
  onLoad() {
    let config = wx.getStorageSync("config");
    this.adList = config.adList.hotVideo;
    wx.setNavigationBarTitle({ title: "ئاۋات كىنولار" });
    wx.showLoading({
      mask: true, //显示透明蒙层，防止触摸穿透,
      success: res => {}
    });
    this.$http
      .get(
        `https://wx.15v3a.cn/weapp/videoList?type=hot&pageIndex=${
          this.pageIndex
        }`
      )
      .then(res => {
        wx.hideLoading();
        this.hotList = res.hotList;
        // console.log(res.hotList);
      });
    wx.hideLoading();
  },
  onReachBottom() {
    wx.showLoading({
      mask: true, //显示透明蒙层，防止触摸穿透,
      success: res => {}
    });
    this.pageIndex += 1;
    this.$http
      .get(
        `https://wx.15v3a.cn/weapp/videoList?type=hot&pageIndex=${
          this.pageIndex
        }`
      )
      .then(res => {
        wx.hideLoading();
        this.hotList = this.hotList.concat(res.hotList);
        // console.log(res.hotList);
        if (res.hotList.length < 10 && this.pageIndex > 0) {
          this.more = false;
        }
      });
    wx.hideLoading();
  },
  methods: {
    toVideo(item) {
      store.commit("playVideo", item);
      this.$http.get("https://wx.15v3a.cn/weapp/counter?vid=" + item.id);

      // console.log(item);
      wx.navigateTo({ url: `/pages/VideoDetail/main?id=${item.video_url}` });
    },
    toAd(id) {
      wx.navigateTo({ url: "/pages/AD/main?from=hotVideo&id=" + id });
    }
  }
};
</script>
<style lang="scss">
.my-ad {
  height: 260rpx;
  width: 96%;
  margin: 20rpx auto;
  border-radius: 30rpx;
  box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
}
.content {
  // position: absolute;
  top: 0;
  width: 96%;
  /* margin-top: 15rpx;
    margin-left: auto;
    margin-right: auto; */
  // height: 355rpx;
  display: grid;
  padding: 5rpx 10rpx;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 17rpx;
  /*  display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-items: center; */

  .item {
    border-radius: 20rpx;
    height: 165rpx;
    box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
    .title {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 25rpx;
      color: white;
      text-align: center;
      line-height: 40rpx;
      font-family: "Alp Ekran", Cambria, Cochin, Georgia, Times,
        "Times New Roman", serif, Arial, Helvetica, sans-serif !important;
    }
  }
}
.more-wrap {
  width: 100%;
  height: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .more {
    display: inline-block;
    color: #666;
    font-size: 28rpx;
  }
}
</style>
